<template lang="html">
    <div class="">
        <ul>
            <li v-for="item in list">
                {{item.name+'-' + item.price}}
            </li>
        </ul>
        <button type="button" @click="addItem()" name="button">添加新数据</button>
    </div>

</template>

<script>
import Vue from 'vue';
export default {
	data() {
		return {
			list: [{
					name: 'apple',
					price: 34
				},
				{
					name: 'banana',
					price: 25
				},
				{
					name: 'orange',
					price: 20
				},

			]
		}
	},
	methods: {
		addItem() {

			// this.list.push({
			// 	name: 'new',
			// 	price: 39
			// })

			//====如果使用
			this.list[1] = {
				name: 'setchange',
				price: 222
			}
			//列表的改变不会触发视图更新，需要使用Vue.set的方法可以触发视图更新
			Vue.set(this.list, 1, {
				name: 'setchange',
				price: 222
			})
		}
	}
}
</script>

<style lang="css">
</style>
